<template>
    <div class="back">
        <div class="box_img">
            <div class="text_">
                <label>
                    <PictureEditingType @handleTypeAdd="handleTypeAdd"></PictureEditingType>
                </label>
                <label>
                    <input type="text"
                                class="text_input"
                                v-model="picture.description"
                                placeholder="图片描述，35字以内"
                                maxlength="35">
                </label>
            </div>
            <div class="img_">
                <img :src="url_" alt="">
            </div>
            <div class="upload">
                上传图片
                <input type="file" class="file" @change="fil_($event)">
            </div>
            <div class="choose">
                <button @click="submit">提交</button>
                <button @click="shutDown">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api";
import PictureEditingType from "@/components/greatPictures/PictureEditingType.vue";
export default {
    name: "ImageAdd",
    components: {PictureEditingType},
    props: ['info'],
    data() {
        return {
            files_: '',
            url_: "",
            picture: {
                type: "",
                path: "",
                description: "",
            }
        }
    },
    mounted() {

    },
    methods: {
        handleTypeAdd(type){
            this.picture.type = type;
        },
        add() {
            if(this.picture.type.toString() === ""){
                this.$store.commit("requestInfo", "分类不为空");
                return
            }

            // 添加需要上传的文件
            const form = new FormData();
            if(this.files_ === ""){
                return""
            }
            form.append('file', this.files_);
            form.append("description",this.picture.description)
            form.append("type",this.picture.type)
            api.pictureInsert(form).then((res)=>{
                if(res.data.code === 200){
                    this.$store.commit("requestInfo", "添加成功");
                }else {
                    this.$store.commit("requestInfo", "添加失败");
                }
            })

        },
        fil_(event) {
            this.url_ = this.echo(event)
            this.files_ = event.target.files[0];
        },
        echo(event) {
            let files = event.target.files;
            let file;
            if (files && files.length > 0) {
                file = files[0];
                if (file.size > 1024 * 1024 * 5) {
                    this.$store.commit("requestInfo", "图片大小不能超过 1MB!");
                    return "";
                }
                let URL = window.URL || window.webkitURL;
                return URL.createObjectURL(file);
            }
        },
        submit() {
            if (this.picture.type === ""  || this.picture.description === "") {
                this.$store.commit("requestInfo", "内容不能为空");
                return;
            }
            this.add();
            this.$emit("shutDown")
        },
        shutDown() {
            this.$emit("shutDown")
            this.url_ = "";

        }
    }
}
</script>

<style scoped>
.back {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 99;
}

.box_img {
    padding: 5px;
    position: relative;
    width: 600px;
    height: 570px;
    background: white;
    border-radius: 3px;
    box-shadow: 0 0 5px 2px rgba(143, 140, 140, 0.4);
    animation: img_ .4s ease-in-out 0s 1 forwards;
}

@keyframes img_ {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.choose {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

button {
    padding: 8px 15px;
    color: white;
    outline: none;
    border: 0;
    border-radius: 3px;
    background: #3586f1;
    margin: 5px;
}

button:hover {
    opacity: .9;
    cursor: pointer;
}

.text_ {
    width: 100%;
}

.text_input {
    display: inline-block;
    text-indent: 0.3rem;
    width: 95%;
    outline: none;
    height: 35px;
    border-radius: 3px;
    letter-spacing: 1px;
    border: 0;
    border-bottom: 1px solid #8f8c8c;
}

label {
    width: 100%;
    display: inline-block;
    margin: 5px;
}

.img_ {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: rgba(238, 221, 202, 0.5);
    width: 100%;
    aspect-ratio: 16/10;
}

.img_ img {
    min-width: 50px;
    max-width: 500px;
    max-height: 350px;
}

.upload {
    position: relative;
    display: inline-block;
    margin: 5px;
    padding: 8px 16px;
    border-radius: 3px;
    color: white;
    font-size: 14px;
    background: #3586f1;
}

.file {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
</style>